<template>
	<view class="tab-bar" style="z-index: 200;">
		<!-- 首页 -->
		<view class="tab-item" @click="switchTab('/pages/index/index',0)">
			<view class="flexcolumn">
				<!-- 未选中 -->
				<view class="flexcolumn" v-show="typeList[0].itemType==0">
					<image class="imgBox" :src="info.xcx_tabimage1" mode=""></image>
				</view>
				<!-- 选中 -->
				<view class="flexcolumn" v-show="typeList[0].itemType==1">
					<image class="imgBox" :src="info.xcx_tabimage1_on" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="tab-item" @click="switchTab('/pages/classify/classify',1)">
			<view class="flexcolumn">
				<!-- 未选中 -->
				<view class="flexcolumn" v-show="typeList[1].itemType==0">
					<image class="imgBox" :src="info.xcx_tabimage2" mode=""></image>
				</view>
				<!-- 选中 -->
				<view class="flexcolumn" v-show="typeList[1].itemType==1">
					<image class="imgBox" :src="info.xcx_tabimage2_on" mode=""></image>
				</view>
			</view>
		</view>
		<!-- vip商品 -->
		<view class="tab-item" @click="switchTab('/pages/shopping/shopping',2)" v-if="info.vipzq_status==1">
			<view class="flexcolumn">
				<!-- 未选中 -->
				<view class="flexcolumn" v-show="typeList[2].itemType==0">
					<image class="imgBox" :src="info.xcx_tabimage3" mode=""></image>
				</view>
				<!-- 选中 -->
				<view class="flexcolumn" v-show="typeList[2].itemType==1">
					<image class="imgBox" :src="info.xcx_tabimage3_on" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 帖子 -->
		<view class="tab-item" @click="switchTab('/pages/post/post',3)">
			<view class="flexcolumn">
				<!-- 未选中 -->
				<view class="flexcolumn" v-show="typeList[3].itemType==0">
					<image class="imgBox" :src="info.xcx_tabimage4" mode=""></image>
				</view>
				<!-- 选中 -->
				<view class="flexcolumn" v-show="typeList[3].itemType==1">
					<image class="imgBox" :src="info.xcx_tabimage4_on" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 我的 -->
		<view class="tab-item" @click="switchTab('/pages/my/my',4)">
			<view class="flexcolumn">
				<!-- 未选中 -->
				<view class="flexcolumn" v-show="typeList[4].itemType==0">
					<image class="imgBox" :src="info.xcx_tabimage5" mode=""></image>
				</view>
				<!-- 选中 -->
				<view class="flexcolumn" v-show="typeList[4].itemType==1">
					<image class="imgBox" :src="info.xcx_tabimage5_on" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				Colortype: 0, //0=褐色,1=绿色,2=深蓝,3=浅蓝
				info:{}
			}
		},
		created() {
			this.getSetColor()
		},
		computed: mapState([
			"typeList"
		]),
		methods: {
			getSetColor() {
				httpRequest.request('api/index/getConfigInfo', 'POST', {}).then(res => {
					this.Colortype = res.data.xcx_color
					this.info=res.data
				}).catch(err => {})
			},
			switchTab(url, index) {
				uni.switchTab({
					url: url
				})
				this.$store.commit("setTypeList", index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgBox{
		width: 80rpx;
		height: 80rpx;
	}
	.text_zi {
		margin-top: 7rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D48B39;
		text-align: center;
	}

	.zi_orange {
		color: #d69040;
	}

	.grey_zi {
		color: #adadad;
	}

	.zi_green {
		color: #1bb495;
	}

	.zi_shen {
		color: #113f5e;
	}

	.zi_blue {
		color: #1484c7;
	}

	/* 橘色 */
	.orange_sy {
		background-image: url("/static/image/tabbar/home.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.orange_fl {
		background-image: url("/static/image/tabbar/classify.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.orange_gwc {
		background-image: url("/static/image/tabbar/shopping.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.orange_tz {
		background-image: url("/static/image/tabbar/post.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.orange_wd {
		background-image: url("/static/image/tabbar/my.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	/* 蓝色 */
	.blue_sy {
		background-image: url("/static/image/tabbar/blue_sy.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.blue_fl {
		background-image: url("/static/image/tabbar/blue_fl.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.blue_gwc {
		background-image: url("/static/image/tabbar/blue_gwc.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.blue_tz {
		background-image: url("/static/image/tabbar/blue_tz.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.blue_wd {
		background-image: url("/static/image/tabbar/blue_wd.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	/* 深蓝 */
	.shen_sy {
		background-image: url("/static/image/tabbar/shen_sy.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.shen_fl {
		background-image: url("/static/image/tabbar/shen_fl.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.shen_gwc {
		background-image: url("/static/image/tabbar/shen_gwc.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.shen_tz {
		background-image: url("/static/image/tabbar/shen_tz.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.shen_wd {
		background-image: url("/static/image/tabbar/shen_wd.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	/* 绿色 */
	.green_sy {
		background-image: url("/static/image/tabbar/green_sy.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.green_fl {
		background-image: url("/static/image/tabbar/green_fl.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.green_gwc {
		background-image: url("/static/image/tabbar/green_gwc.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.green_tz {
		background-image: url("/static/image/tabbar/green_tz.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.green_wd {
		background-image: url("/static/image/tabbar/greenj_wd.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	/* 灰色 */
	.grey_sy {
		background-image: url("/static/image/tabbar/home_h.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.grey_fl {
		background-image: url("/static/image/tabbar/classify_h.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.grey_gwc {
		background-image: url("/static/image/tabbar/shopping_h.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.grey_tz {
		background-image: url("/static/image/tabbar/post_h.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.grey_wd {
		background-image: url("/static/image/tabbar/my_h.png");
		background-size: 100% 100%;
		width: 45rpx;
		height: 45rpx;
	}

	.tab-bar {
		display: flex;
		background-color: #fff;
		border-top: 1px solid #e5e5e5;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		margin: 5rpx 0;
	}

	.tab-item>icon {
		display: block;
		margin-bottom: 3rpx;
	}

	.tab-item>text {
		font-size: 24rpx;
		color: #333;
	}

	.img {
		width: 49rpx;
		height: 44rpx;
	}
</style>